<template>
  <view class="content">
	  <u-navbar :is-back="false" title="拜访记录填写"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
    <order-item :li="info"></order-item>
    <view class="topheader">
      <view class="titel">拜访对象</view>
      <view class="titel" style="padding-top: 0;">{{info.fContact}}</view>
    </view>
    <view class="topheader">
      <view class="titel">商品陈列图<text style="color:#999">（上传前）</text></view>
      <view class="upimg">
        <u-upload ref="uUpload" :header="header" name="file" :action="action">
        </u-upload>
      </view>
    </view>
    <view class="topheader" style="border: 0;">
      <view class="x-row" @click="photoCreate">
        <view class="titel x-col-center x-col">员工照片</view>
        <image class="x-col-center photoCreate" style="width: 48rpx;height: 48rpx;" mode="widthFix"
          src="/static/photoCreate.png"></image>
      </view>
      <view class="upimg">
        <!-- <u-upload disabled></u-upload> -->
        <!-- {{info.UserPic}} -->
        <image mode="widthFix" v-if="info.UserPic" :src="img+info.UserPic" class="ygimg"></image>

      </view>
    </view>
    <photoLoaction v-if="showpho" @getPhotoSuccess="getPhotoSuccess" @getPhotoFail="getPhotoFail"
      :address="urlimg"></photoLoaction>
    <view style="background: #f8f8f8; height:16upx ;"></view>
    <view class="viebox">
      <navigator :url="'/pages/my_customer/my_customer_stock?id='+info.fId" hover-class="none" class="x-row">
        <view class="listtop">商家库存</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view>
	<!--
    <view class="viebox">
      <navigator :url="'./ontime_products_add?bid='+info.bid+'&id='+info.fId" hover-class="none"
        class="x-row">
        <view class="listtop">临期商品</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view>
    <view class="viebox">
      <navigator :url="'./specialtreatmentproducts?bid='+this.form.TaskId+'&id='+info.fId"
        hover-class="none" class="x-row">
        <view class="listtop">商品处理</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view>
	-->
    <view class="viebox ">
      <navigator :url="'/pages/sale/productstobepurchased?fId='+this.form.TaskId" hover-class="none"
        class="x-row">
        <view class="listtop">商品下单</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view>
    <!-- <view class="viebox">
      <navigator :url="'./productstobepurchased?bid='+info.bid+'&id='+info.fId" hover-class="none"
        class="x-row">
        <view class="listtop">需进货产品</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view>
    <view class="viebox ">
      <navigator :url="'./exchangeproducts?bid='+info.bid+'&id='+info.fId" hover-class="none"
        class="x-row">
        <view class="listtop">兑换产品</view>
        <view class="x-col"></view>
        <u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
      </navigator>
    </view> -->
    <view class="topheader" style="border: 0;">
      <view class="titel">商品陈列图<text style="color:#999">（上传后）</text></view>
      <view class="upimg">
        <u-upload ref="uUpload2" :header="header" :action="action" name="file">
        </u-upload>
      </view>
    </view>
    <view class="topheader" style="border: 0;">
      <view class="x-row" @click="photoCreate">
        <view class="titel x-col-center x-col">拜访情况记录</view>
      </view>
      <view class="upimg">
        <u-input type="textarea " border height="100" v-model="form.Info"></u-input>
      </view>
    </view>
    <view>
      <view class="button" @click="sendInfo">提交</view>
    </view>

  </view>
</template>

<script>
import orderItem from '@/components/order-item'
import photoLoaction from '@/components/photoLoaction'
export default {
  components: {
    photoLoaction,
    orderItem
  },
  data() {
    return {
      header: {
        token: uni.getStorageSync('token')
      },
      img: this.urlimg,
      action: this.urlimg + 'api/Upfile/PostImgFile',
      showpho: false,
      address: '',
      photo: '',
      cid: '',
      info: {},
      form: {
        TaskId: 0,
        MrkId: 0,
        MrkName: '',
        ProudctPic: '',
        ProudctPic2: '',
        UserPic: '',
        Info: '',
        Map: '',
        Address: '',
        IsBuy: 0
      },
	  clineOnce:true,
      ex_imgs: [],
      ec_imgs: [],
      canInfo: ''
    }
  },
  onLoad(e) {
    this.form.MrkId = e.fId
    this.form.TaskId = e.taskId
    this.$axios('api/MrkBasic/GetDetail', 'post', { value: e.fId }).then(res => {
      this.info = res.Value
    })
  },
  onHide() {
    // 页面隐藏的时候，需要缓存下图片
    if (this.$refs.bUpload) {
      uni.setStorageSync('ex_imgs', this.$refs.bUpload.lists)
    }
    if (this.$refs.uUpload) {
      uni.setStorageSync('ec_imgs', this.$refs.uUpload.lists)
    }
  },
  methods: {
    getreqImg(list) {
      return list.map(x => x.response.Value[0].sFileUrl).join(',')
    },
    getPhotoFail() {
      this.showpho = false
    },
    sendInfo() {
		if (!this.clineOnce) return false
		this.clineOnce = false
      this.form.ProudctPic = this.getreqImg(this.$refs.uUpload.lists)
      this.form.ProudctPic2 = this.getreqImg(this.$refs.uUpload2.lists)
      this.$axios('api/UserVisit/AddDetail', 'post', { value: this.form }).then(res => {
        if (!res.Success) {
          uni.showToast({
            title: '提交失败：' + res.Message,
            icon: 'none',
            duration: 2000
          })
		  this.clineOnce = true
          return false
        }

        //  this.$api.handleBack('提交成功')
        this.$api.handleToUrl('提交成功', '/pages/sale/visit_records')
      })
    },
    photoCreate() {
      let that = this
      that.showpho = true
    },
    getPhotoSuccess(e, img) {
      this.form.Address = e.address
      this.form.UserPic = img
      this.form.Map = Object.values(e.location).reverse().toString()
      this.form.MrkName = this.info.fName
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.topheader {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.titel {
  color: #34404a;
  font-size: 32upx;
  padding: 32upx 0;
}

.imglist {
  padding-bottom: 30upx;
  overflow: hidden;
}

.imglist image {
  width: 160upx;
  height: 160upx;
  float: left;
  margin-right: 20upx;
}

.viebox {
  color: #34404a;
  font-size: 32upx;
  padding: 0 32upx;
  line-height: 110upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.upimg {
  margin-top: -10upx;
  padding-bottom: 20upx;
}
.upimg .ygimg {
  width: 194rpx;
}

/deep/.upimg .u-add-wrap {
  border: 1px dashed #d1d1d1;
  background: none;
}

/deep/.u-list-item {
  margin: 0;
  margin-right: 10upx;
}

.button {
  width: 654upx;
  height: 84upx;
  background: #2b88fe;
  border-radius: 8upx;
  position: relative;
  bottom: 20upx;
  margin-top: 50upx;
  left: 50%;
  transform: translateX(-50%);
  line-height: 84upx;
  color: #fff;
  text-align: center;
  font-size: 32upx;
  margin-bottom: 20upx;
}
</style>
